<!-- animation.html -->

<!--
SVG icons by Google
"Icons - Material Design"
    https://material.io/resources/icons/
    Retrieved April 24, 2020
Apache license version 2.0
    https://www.apache.org/licenses/LICENSE-2.0.html
-->

<div id="animation-ui">

    <input class="slider" type="range" min="0" max="0" value="0" step="any"/>
    <div class="tick-marks"></div>

    <div class="buttons">

        <button class="play-pause" title="Play/pause">
            <!-- play_arrow -->
            <svg xmlns="http://www.w3.org/2000/svg" class="play" viewBox="0 0 24 24" fill="#3131ff"
                 width="24px" height="24px">
                <path d="M8 5v14l11-7z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
            <!-- pause -->
            <svg xmlns="http://www.w3.org/2000/svg" class="pause" viewBox="0 0 24 24" fill="#3131ff"
                 width="24px" height="24px">
                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
        </button>

        <button class="previous" title="Go to previous frame">
            <!-- skip_previous -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3131ff"
                 width="24px" height="24px">
                <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
        </button>
        <button class="next" title="Go to next frame">
            <!-- skip_next -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3131ff"
                 width="24px" height="24px">
                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
        </button>

        <button class="slower" title="Decrease playback speed">
            <!-- switch_right -->
            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                 viewBox="0 0 24 24" fill="#3131ff" width="24" height="24">
                <rect fill="none" width="24" height="24" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 24 24)"/>
                <path d="M15.5,15.38V8.62L18.88,12L15.5,15.38 M14,19l7-7l-7-7V19L14,19z M10,19V5l-7,7L10,19z"/>
            </svg>
        </button>
        <button class="faster" title="Increase playback speed">
            <!-- switch_left -->
            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                 viewBox="0 0 24 24" fill="#3131ff" width="24" height="24">
                <rect fill="none" height="24" width="24"/>
                <path d="M8.5,8.62v6.76L5.12,12L8.5,8.62 M10,5l-7,7l7,7V5L10,5z M14,5v14l7-7L14,5z"/>
            </svg>
        </button>

        <button class="toggle-loop" title="Toggle looping">
            <!-- sync_disabled -->
            <svg xmlns="http://www.w3.org/2000/svg" class="once" viewBox="0 0 24 24" fill="#3131ff"
                 width="24px" height="24px">
                <path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/>
                <path d="M10 6.35V4.26c-.8.21-1.55.54-2.23.96l1.46 1.46c.25-.12.5-.24.77-.33zm-7.14-.94l2.36 2.36C4.45 8.99 4 10.44 4 12c0 2.21.91 4.2 2.36 5.64L4 20h6v-6l-2.24 2.24C6.68 15.15 6 13.66 6 12c0-1 .25-1.94.68-2.77l8.08 8.08c-.25.13-.5.25-.77.34v2.09c.8-.21 1.55-.54 2.23-.96l2.36 2.36 1.27-1.27L4.14 4.14 2.86 5.41zM20 4h-6v6l2.24-2.24C17.32 8.85 18 10.34 18 12c0 1-.25 1.94-.68 2.77l1.46 1.46C19.55 15.01 20 13.56 20 12c0-2.21-.91-4.2-2.36-5.64L20 4z"/>
            </svg>
            <!-- sync -->
            <svg xmlns="http://www.w3.org/2000/svg" class="loop" viewBox="0 0 24 24" fill="#3131ff"
                 width="24px" height="24px">
                <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
        </button>

    </div>

</div>
